<!DOCTYPE html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Loader No JS Demo</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
  /* CSS styles */
  /* Example by Luca Demian at http://codepen.io/lucadem1313/pen/vKWqRV */

  body, html{
    width:100%;
    height:100%;
    background:#FFF;
    box-sizing:border-box;
    padding:0px;
    overflow:hidden;
    font:23px sans-serif;
  }
  #all-squares{
    position:absolute;
    background:#e12828;
    background:#e02828;
    min-width:350px;
    min-height:350px;
    display:inline-block;
    box-sizing:border-box;
    padding-top:70px;
    padding-left:70px;
    border-radius:2px;
    perspective:400px;
    perspective-origin:50% 50%;
    top:50%;
    left:50%;
    margin-top:-175px;
    margin-left:-175px;
    overflow:hidden;
    /*transform:scale(0.8);

    -webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75); */
  }



  @keyframes square-before{
    0%{width:0;height:0;top:auto;bottom:0;right:auto;left:0;opacity:1;}
    12.5%{width:0;height:100%;top:auto;bottom:0;right:auto;left:0;}
    24.9%{width:100%;height:100%;top:auto;bottom:0;right:auto;left:0;}
    25%{width:100%;height:100%;top:0;bottom:auto;right:auto;left:0;}
    37.5%{width:100%;height:0;top:0;bottom:auto;}
    49.9%{width:0;height:0;top:0;bottom:auto;right:0;left:auto;opacity:1;}
    50%{width:0;height:0;top:0;bottom:auto;right:0;left:auto;opacity:0;}
    100%{width:0;height:0;top:0;bottom:auto;right:0;left:auto;opacity:0;}
  }
  @keyframes square-after{
    0%{width:0;height:0;top:0;bottom:auto;right:0;left:auto;opacity:0;}
    49.9%{width:0;height:0;top:0;bottom:auto;right:0;left:auto;opacity:0;}
    50%{width:0;height:0;top:0;bottom:auto;right:0;left:auto;opacity:1;}
    62.5%{width:0;height:100%;top:0;bottom:auto;right:0;left:auto;}
    74.9%{width:100%;height:100%;top:0;bottom:auto;right:0;left:auto;}
    75%{width:100%;height:100%;top:auto;bottom:0;right:auto;left:0;}
    87.5%{width:100%;height:0;top:auto;bottom:0;}
    99.9%{width:0;height:0;top:auto;bottom:0;right:auto;left:0;opacity:1;}
    100%{width:0;height:0;top:auto;bottom:0;right:auto;left:0;opacity:0;}
  }

  #all-squares.border::before{
    content:"";
    border-left:13px #e01717 solid;
    border-top:13px #e01717 solid;
    animation-name:square-before;
    animation-duration:1.6s;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    position:absolute;
    bottom:0;
    left:0;
    box-sizing:border-box;
    border-top-left-radius:3px;
  }
  #all-squares.border::after{
    content:"";
    border-right:13px #e01717 solid;
    border-bottom:13px #e01717 solid;
    animation-name:square-after;
    animation-duration:1.6s;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    position:absolute;
    top:0;
    right:0;
    box-sizing:border-box;
  }



  .row{
    margin:0;
    height:70px;
    overflow:hidden;
  }
  .square{
    width:70px;
    height:70px;
    background:#FFF;
    display:inline-block;
    transform-origin:0 0;
    margin:0;
    opacity:0;


    animation-duration:2.4s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    animation-iteration-count: infinite;
  }
  #top .square:not(.first){
    background:#f9e9e9;
  }
  #middle .square:not(.first){
    background:#f9d3d3;
  }


  @keyframes top-first{
    0% {transform:rotateX(90deg);opacity:0;}
    6% {transform:rotateX(0deg);opacity:1;}
    50% {transform:rotateX(0deg);opacity:1;}
    79% {transform:rotateX(0deg);opacity:0;}
    100% {transform:rotateX(0deg);opacity:0;}
  }
  @keyframes top-second{
    0% {transform:rotateY(90deg);opacity:0;}
    18% {transform:rotateY(90deg);opacity:0;}
    23% {transform:rotateY(0deg);opacity:1;}
    58% {transform:rotateY(0deg);opacity:1;}
    87% {transform:rotateY(0deg);opacity:0;}
    100% {transform:rotateY(0deg);opacity:0;}
  }
  @keyframes top-third{
    0% {transform:rotateY(90deg);opacity:0;}
    23% {transform:rotateY(90deg);opacity:0;}
    29% {transform:rotateY(0deg);opacity:1;}
    67% {transform:rotateY(0deg);opacity:1;}
    96% {transform:rotateY(0deg);opacity:0;}
    100% {transform:rotateY(0deg);opacity:0;}
  }




  @keyframes second-first{
    0% {transform:rotateX(90deg);opacity:0;}
    6% {transform:rotateX(90deg);opacity:0;}
    12% {transform:rotateX(0deg);opacity:1;}
    58% {transform:rotateX(0deg);opacity:1;}
    87% {transform:rotateX(0deg);opacity:0;}
    100% {transform:rotateX(0deg);opacity:0;}
  }
  @keyframes second-second{
    0% {transform:rotateX(90deg);opacity:0;}
    29.4% {transform:rotateX(90deg);opacity:0;}
    35.4% {transform:rotateX(0deg);opacity:1;}
    67% {transform:rotateX(0deg);opacity:1;}
    96% {transform:rotateX(0deg);opacity:0;}
    100% {transform:rotateX(0deg);opacity:0;}
  }




  @keyframes third-first{
    0% {transform:rotateX(90deg);opacity:0;}
    12% {transform:rotateX(90deg);opacity:0;}
    18% {transform:rotateX(0deg);opacity:1;}
    67% {transform:rotateX(0deg);opacity:1;}
    96% {transform:rotateX(0deg);opacity:0;}
    100% {transform:rotateX(0deg);opacity:0;}
  }

  #top .first{
    animation-name:top-first;
  }
  #top .second{
    animation-name:top-second;
  }
  #top .third{
    animation-name:top-third;
  }
  #middle .first{
    animation-name:second-first;
  }
  #middle .second{
    animation-name:second-second;
  }
  #bottom .first{
    animation-name:third-first;
  }

  </style>

</head>
<body>
  <!--[if lt IE 8]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div id="all-squares">
    <div id="top" class="row"><div class="square first first-fade"></div><div class="square second second-fade"></div><div class="square third third-fade"></div></div>
    <div id="middle" class="row"><div class="square first second-fade"></div><div class="square second third-fade"></div></div>
    <div id="bottom" class="row"><div class="square first third-fade"></div></div>
  </div>

</body>
</html>
